<template>
  <form @submit.prevent="onSubmit()">
    <input
      type="text"
      v-model="keyWord"
      onblur="if(this.value==''){this.value='输入关键词';}"
      onfocus="if(this.value=='输入关键词'){this.value='';}"
    />
    <button><img src="@/assets/image/common/search.png" /> 搜索</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      keyWord: "输入关键词",
    };
  },
  methods: {
    onSubmit() {
      if (this.keyWord !== "输入关键词" && this.keyWord !== "") {
        this.$router.push({
          path: "/searchresult",
          query: { keyWord: this.keyWord },
        });
      }
    },
  },
  created() {
    if (this.$route.query.keyWord !== undefined) {
      this.keyWord = this.$route.query.keyWord;
    }
  },
};
</script>

<style scoped>
form {
  width: 960px;
  height: 64px;
}
input {
  display: inline-block;
  padding-top: 0;
  padding-bottom: 0;
  width: 800px;
  height: 64px;
  line-height: 64px;
  border-radius: 6px;
  padding-left: 32px;
  margin-right: 36px;
  font-size: 20px;
  border: none;
  box-sizing: border-box;
  color: #797979;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  background: white;
}
input:focus {
  outline: none;
  color: black;
}
button {
  cursor: pointer;
  height: 64px;
  width: 96px;
  border-radius: 6px;
  background-color: #005a95;
  color: white;
  font-size: 20px;
  font-weight: bold;
  border: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
button > img {
  height: 24px;
  width: 24px;
  vertical-align: text-bottom;
}
button:hover {
  background-color: #7dc5eb;
}
</style>
